<template>
  <div>
    <div class="filter-c">
      <span class="filter-name">Blur (0):</span>
      <el-slider :min="0" :max="5" v-model="filter.blur" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.blur}}</span>
    </div>
    <div class="filter-c">
      <span class="filter-name">Brightness (100):</span>
      <el-slider :min="0" :max="600" v-model="filter.brightness" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.brightness}}</span>
    </div>
    <div class="filter-c">
      <span class="filter-name">Contrast (100):</span>
      <el-slider :min="0" :max="600" v-model="filter.contrast" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.contrast}}</span>
    </div>
    <div class="filter-c">
      <span class="filter-name">Grayscale (0):</span>
      <el-slider :min="0" :max="100" v-model="filter.grayscale" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.grayscale}}</span>
    </div>
    <div class="filter-c">
      <span class="filter-name">Hue-Rotate (0):</span>
      <el-slider :min="0" :max="360" v-model="filter.hueRotate" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.hueRotate}}</span>
    </div>
    <div class="filter-c">
      <span class="filter-name">Invert (0):</span>
      <el-slider :min="0" :max="100" v-model="filter.invert" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.invert}}</span>
    </div>
    <div class="filter-c">
      <span class="filter-name">Opacity (0):</span>
      <el-slider :min="0" :max="100" v-model="filter.opacity" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.opacity}}</span>
    </div>
    <div class="filter-c">
      <span class="filter-name">Saturate (0):</span>
      <el-slider :min="0" :max="600" v-model="filter.saturate" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.saturate}}</span>
    </div>
    <div class="filter-c">
      <span class="filter-name">Sepia (0):</span>
      <el-slider :min="0" :max="100" v-model="filter.sepia" @input="changeFilter" @change="saveData"></el-slider>
      <span>{{filter.sepia}}</span>
    </div>
    <el-button type="primary" @click="restore">恢复上一次设置</el-button>
    <el-button type="primary" @click="restoreDefault">恢复默认</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        blur: 0,
        brightness: 100,
        contrast: 100,
        grayscale: 0,
        hueRotate: 0,
        invert: 0,
        opacity: 100,
        saturate: 100,
        sepia: 0
      }
    }
  },
  methods: {
    changeFilter() {
      if(document.body !== null) {
        document.body.style.filter = `blur(${this.filter.blur}px) brightness(${this.filter.brightness}%) contrast(${this.filter.contrast}%) grayscale(${this.filter.grayscale}%) hue-rotate(${this.filter.hueRotate}deg) invert(${this.filter.invert}%) opacity(${this.filter.opacity}%) saturate(${this.filter.saturate}%) sepia(${this.filter.sepia}%)`
      }
    },
    saveData() {
      this.$store.commit('saveFilterData', this.filter)
    },
    restore() {
      this.filter = this.$store.state.filter
    },
    restoreDefault() {
      this.filter = {
        blur: 0,
        brightness: 100,
        contrast: 100,
        grayscale: 0,
        hueRotate: 0,
        invert: 0,
        opacity: 100,
        saturate: 100,
        sepia: 0
      }
    }
  }
}
</script>

<style scoped>
  .filter-c {
    display: flex;
    align-items: center;
  }
  .el-slider {
    width: 20%;
    margin-right: 20px;
    }
  .filter-name{
    width: 150px;
  }
</style>
